<template>
    <div class="progress">
       <div class="round" :style="{background: parmas.color}">
         {{ parmas.showIndex }}
       </div>
     
       <el-progress :percentage="parmas.showNum" :stroke-width="20" :color="parmas.color">
        <template #default="{ percentage }">
            <span class="showText" >{{ percentage }} {{ $t("home.time") }}</span>
            <span class="label">{{parmas.gateway_name}}</span>
        </template>
       </el-progress>
    </div>
</template>


<script lang="ts" setup>
    // 父组件传入的参数
    let parmas = defineProps({
        color: {
            type: String,
            default: "blue"
        },
        showNum: {
            type: String,
            default: 0
        },
        showIndex: {
            type:String,
            required: true
        },
        gateway_name: {
            type: String,
            default: '未知网关名称'
        }
    })
</script>

<style lang="less" scoped>
    .progress {
        display: flex;
        flex:1;
        width: 100%;
        justify-content: center;
        align-items: center;
        .round {
            width: 25px;
            height: 25px;
            border-radius: 50%;
            background-color: red;
            margin-right: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
        }
        .el-progress {
            width: 70%;
            margin-right: 10px;
            position: relative;
            .label {
            position: absolute;
            top: -20px;
            left: 10px;
            color: #000;
            font-size: 13px;
        }
         ::v-deep .el-progress-bar__outer {
                background-color: #ebeef5;
            }
        }
        .el-button {
            width: 40px;
        }
    }
    .showText {
        margin-left: 5px;
        font-size: 20px;
        letter-spacing: 4px;
    }

</style>